<!--
功能：报修组件,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/5 12:29,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div class="app">
    <div class="table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          label="编号"
          width="50">
        </el-table-column>
        <el-table-column
          v-for="u in table"
          :key="u.id"
          :prop="u.prop"
          :label="u.label">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="scope.row.process != '申请中'"
              @click="handleEdit(scope.$index, scope.row)">{{ scope.row.process }}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {message, confirm} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "Repair",
  data() {
    return {
      repair: {
        id: '',
        txt: '',
        process: ''
      },
      table: [{
        id: 1,
        prop: 'applytime',
        label: '申请日期'
      }, {
        id: 2,
        prop: 'user.name',
        label: '申请人'
      }, {
        id: 3,
        prop: 'user.phone',
        label: '联系方式'
      }, {
        id: 4,
        prop: 'content',
        label: '申请内容'
      }, {
        id: 5,
        prop: 'number',
        label: '数量'
      }, {
        id: 6,
        prop: 'process',
        label: '进程'
      }, {
        id: 7,
        prop: 'floor.name',
        label: '楼层号'
      }, {
        id: 8,
        prop: 'room.name',
        label: '房间号'
      }],
      tableData: []
    };
  },
  components: {},
  computed: {
    ...mapState(["floor"])
  },
  mounted() {
    //  查询操作
    this.findAll()
  },
  methods: {
    handleEdit(index, row) {
      //受理操作 更新进程状态为等待。。。
      this.repair.id = row.id
      this.repair.process = "已受理"
      confirm("确定要受理该申请【" + row.content + "】是否继续？", this.updateRepair)
    },
    updateRepair() {
      this.$http.post('/root/update', this.repair).then(response => {
        if (response.data) {
          message("success", "查询成功")
        } else {
          message("error", "未知的错误")
        }
      }).catch(err => {
        message("error", "请求参数错误")
      }).finally(() => {
        this.findAll()
      })
    },
    handleDelete(index, row) {
      //取消操作 说明理由 跟新进程为取消
      this.repair.id = row.id
      this.repair.process = "已取消"
      confirm("确定要删除该申请【" + row.content + "】是否继续？", this.removeRepair)
    },
    removeRepair() {
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputErrorMessage: '理由不规范'
      }).then(({value}) => {
        if (value == null) {
          message("error", "驳回理由不可为空")
        } else {
          this.repair.txt = value
          this.$http.post('/root/remove', this.repair).then(response => {
            if (response.data) {
              message("success", "查询成功")
            } else {
              message("error", "未知的错误")
            }
          }).catch(err => {
            message("error", "请求参数错误")
          }).finally(() => {
            this.findAll()
          })
        }
      }).catch(() => {
      });


    },
    findAll() {
      this.$http.post('/root/repair', this.floor).then(response => {
        if (response.data) {
          this.tableData = response.data
          message("success", "查询成功")
        } else {
          message("error", "未知的错误")
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>

.table {
}

.table /deep/ .el-table th > .cell {
  text-align: center;
}

.table /deep/ .el-table .cell {
  text-align: center;
}
</style>
